
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>

				
		<div class="nav-container">
			<nav class="nav-1">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<a href="index.html" class="home-link">
								<img alt="Logo" class="logo" src="img/logo-square-light.png">
							</a>
							<ul class="menu">
								<li class="has-dropdown"><a href="#">Home</a>
									<ul class="subnav">
										<li><a href="index.html">Classic Home</a></li>
										<li><a href="home-2.html">Startup</a></li>
										<li><a href="home-3.html">Rustic</a></li>
										<li><a href="home-4.html">Agency</a></li>
										<li><a href="home-5.html">One Page</a></li>
										<li><a href="home-6.html">Personal</a></li>
										<li><a href="home-7.html">Landing</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Pages</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">About</a>
											<ul class="subnav-level-2">
												<li><a href="about-1.html">About 1</a></li>
												<li><a href="about-2.html">About 2</a></li>
												<li><a href="about-3.html">About 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Services</a>
											<ul class="subnav-level-2">
												<li><a href="services-1.html">Services 1</a></li>
												<li><a href="services-2.html">Services 2</a></li>
												<li><a href="services-3.html">Services 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Coming Soon</a>
											<ul class="subnav-level-2">
												<li><a href="coming-soon-1.html">Coming Soon 1</a></li>
												<li><a href="coming-soon-2.html">Coming Soon 2</a></li>
											</ul>
										</li>
										<li><a href="404.html">404 Error</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Blog</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Post Pages</a>
											<ul class="subnav-level-2">
												<li><a href="blog-1.html">Grid</a></li>
												<li><a href="blog-2.html">Grid Sidebar</a></li>
												<li><a href="blog-3.html">Image</a></li>
												<li><a href="blog-4.html">Image Sidebar</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Articles</a>
											<ul class="subnav-level-2">
												<li><a href="article-1.html">Article</a></li>
												<li><a href="article-2.html">Article Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Work</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Projects</a>
											<ul class="subnav-level-2">
												<li><a href="work-1.html">Filter Grid</a></li>
												<li><a href="work-2.html">Large Grid</a></li>
											</ul>
										</li>
										<li><a href="work-single-1.html">Single</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Shop</a>
									<ul class="subnav">
										<li><a href="shop-1.html">Products Grid</a></li>
										<li><a href="product-1.html">Single Product</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Contact</a>
									<ul class="subnav">
										<li><a href="contact-1.html">Project Planner</a></li>
										<li><a href="contact-2.html">Map & Instagram</a></li>
										<li><a href="contact-3.html">Simple Form</a></li>
									</ul>
								</li>
							</ul>
							
							<ul class="social-links">
								<li><a href="#"><i class="ti ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
							</ul>
						
							<div class="nav-functions">
						
								<div class="search-bar">
									<form class="search">
										<input type="text" placeholder="" name="search">
										<input type="submit" value="">
										<i class="pe-7s-search"></i>
									</form>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="mobile-toggle">
					<div class="bar-1"></div>
					<div class="bar-2"></div>
				</div>
			</nav>
		</div>
		
		<div class="main-container">
					
			<section class="hero-slider large-image short-header">
				<ul class="slides">
					<li>
						<div class="background-image-holder background-parallax">
							<img alt="Slide Background" class="background-image" src="img/hero27.jpg">
						</div>
			
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">About Us</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li>
				</ul>
			</section>
			
			<section class="inline-skills">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>About Our Company</h5>
								<h4>Vast experience meets ambitious vision.</h4>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
								</p>
								<a class="text-link" href="#">Learn even more <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div>
					
						<div class="col-md-6">
							<div class="skills-wrapper">
								<div class="skill">
									<i class="pe-7s-user"></i>
									<span class="number">50+</span>
									<span class="sub">Projects Delivered</span>
								</div>
							
								<div class="skill">
									<i class="pe-7s-coffee"></i>
									<span class="number">24</span>
									<span class="sub">Cliches Avoided</span>
								</div>
							
								<div class="skill">
									<i class="pe-7s-scissors"></i>
									<span class="number">16</span>
									<span class="sub">Grand Openings</span>
								</div>
							
								<div class="skill">
									<i class="pe-7s-joy"></i>
									<span class="number">+1</span>
									<span class="sub">Levels Up</span>
								</div>
							</div>
						</div>	
					</div><!--end of row-->
				</div><!--end of container-->
			
			</section>
			
			<section class="image-block short-pad">
		
				<div class="image-holder col-md-4 pull-left">
					<div class="background-image-holder">
						<img alt="Slide Background" class="background-image" src="img/hero25.jpg">
					</div>
				</div>
		
				<div class="container">
					<div class="row">
						<div class="col-md-5 col-sm-8 col-md-offset-4">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>A proven process</h5>
								<h4>Delivering corporate<br> good looks with style</h4>
								<p>
									At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestiai.
								</p>
							
								<p>
									Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
								</p>
								<a class="text-link" href="#">Read our story <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div>
					
						<div class="col-md-3 col-sm-4">
							<div class="member-spotlight">
								<img alt="Team Member" src="img/team1.jpg">
								<span class="title alt-font">Jihen So / CEO &amp; Founder</span>
								<p>
									Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
								</p>
								<ul class="arrow-list">
									<li><a href="#">Web Design</a></li>
									<li><a href="#">Web Applications</a></li>
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
			</section>
			
			<section class="text-divider overlay">
				<div class="background-image-holder">
					<img alt="Slide Background" class="background-image" src="img/hero1.jpg">
				</div>
			
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
							<h5 class="text-white">Our Philosophy</h5>
							<p class="text-white super-lead">
								Always pushing to make beautiful digital experiences infused with emotion and executed  with excellence.
							</p>
							<a class="text-link text-white" href="#">About our company <i class="icon ti ti-arrow-right arrow_right"></i></a>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="clients-1">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<div class="text-block">
								<p class="super-lead text-white">A few of the many valued clients we've had the pleasure to work with.</p>
							</div>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c1.png">
						</div>
					
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c2.png">
						</div>
					
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c3.png">
						</div>
					
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c4.png">
						</div>
					
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			<footer class="footer-6">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-md-offset-1 col-sm-6">
							<a href="#">
								<img class="logo" alt="logo" src="img/logo-square-light.png">
							</a>
							<p>
								300 Collins St.<br> 
								Suite 2A<br>  
								Melbourne, 3000
							</p>
							<p>
								P: +6148 3847 382<br>
								E: hello@machine.net
							</p>
						</div>
					
						<div class="col-md-4 col-sm-6">
							<h5>Twitter</h5>
							<div class="twitter-feed">
								<div class="tweets-feed" data-widget-id="492085717044981760">
							
								</div>
							</div>
						</div>
					
						<div class="col-md-2 col-md-offset-1 col-sm-12">
							<h5>Navigate</h5>
							<ul class="link-list">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Our Work</a></li>
								<li><a href="#">Journal</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
				
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-sm-12">
							<div class="footer-lower">
								<span>© Copyright 2014 Medium Rare, All Rights Reserved</span>
								<ul class="social-links">
									<li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
	
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				
				</div><!--end of container-->	
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/parallax.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				